<template>
	<scroll-view scroll-y style="background-color: #fff;height: 100vh;font-size: 40rpx;">
		<view style="width: 710rpx;width: 100vw;background-color: #fff;margin-bottom: 15rpx;margin-top: 20rpx;display: flex;flex-direction: column;align-items: center;">
			<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<!-- <u-input v-model="form.name"  placeholder='事件名称' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
						<u-field
									v-model="form.name"
									label="课程名"
									style="width: 100%;margin-right: 40rpx;"
									v-bind:custom-style="{fontSize:'40rpx'}"
									input-align="right"
									 
								>
						</u-field>
					</view>
					<!-- <view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view> -->
				</view>
			</view>
			
			<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<!-- <u-input v-model="form.name"  placeholder='事件名称' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
						<u-field
									v-model="form.teachers"
									label="老师"
									style="width: 100%;margin-right: 40rpx;"
									v-bind:custom-style="{fontSize:'40rpx'}"
									input-align="right"
									
								>
						</u-field>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;">
			<view 
				@click="chooseLessonColor(index)"
				style="height: 65rpx;width: 65rpx;border-radius: 50%;margin: 20rpx;"
				v-bind:style="{
					backgroundColor: item.background_color,
					borderWidth: item.checked?'2rpx': '' ,
					borderStyle: item.checked?'solid': '',
					borderColor: item.checked?item.border_color: ''
					
				}"
				v-for="(item, index) in colors"
				:key = 'index'
			>
			</view>
		</view>
		<view style="width: 100vw;background-color: #fff;margin-bottom: 15rpx;">
			<view v-for="(item,index) in form.time"  style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 20rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="display: flex;flex-direction: row;justify-content: space-between;">
						<view style="height: 100rpx;display: flex;align-items: center;width: 200rpx;">
							<u-icon v-if="index" @click="currentPeriodCancel(index)" name="minus-circle-fill" size="60" style="color: #e85132;"></u-icon>
							<view style="margin-left: 10rpx;">时段{{index+1}}</view>
						</view>
						<view @click="playWeekExpand(index)" style="width: 590rpx;height: 100rpx;display: flex;justify-content: flex-end;align-items: center;">
							<view>{{calcWeekType(index)}} 星期{{weekName[item.day]}}  {{item.juti[0]+1}}-{{item.juti[1]+1}}节</view>
						</view>
					</view>
				</view>
			</view>
			<u-popup v-model="expand_or_not" @close="playWeekContract(happen_time_order)" mode="bottom" height="780rpx" border-radius="50" :mask-close-able = "false">
				<view style="display: flex;flex-direction: row;justify-content: space-between;padding-top: 30rpx;margin-left: 40rpx;width: 90%;margin-bottom: 20rpx;">
					<view>
						<u-icon @click="weekChangeCancel" name="close" color="#606266" size="28"></u-icon>
					</view>
					<view>时段{{happen_time_order+1}}</view>
					<view >
						<u-icon @click="weekChangeSave" name="checkmark" color="#606266" size="28"></u-icon>
					</view>
				</view>
				<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
					<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
						<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
							<!-- <u-input v-model="form.place" style="width: 100%;margin-right: 40rpx;" placeholder='事件描述' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
							<u-field
										v-model="form.time[happen_time_order].place"
										label="教室"
										style="width: 100%;margin-right: 40rpx;"
										v-bind:custom-style="{fontSize:'40rpx'}"
										input-align="right"
										placeholder="若不填,默认为时段1所对应教室"
									>
							</u-field>
						</view>
					</view>
				</view>
				<view style="width: 750rpx;background-color: #fff;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;">
					<view style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 20rpx;" :key='item'>
						<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
							<view  style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
								<view>时间</view>
								<view style="display: flex;flex-direction: row;">
									<swiper :current='current_day' @change="currentDayChange" vertical circular style="width: 160rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;margin-right: 40rpx;">
										<swiper-item v-for="(item,index) in weekName" :key="index" style="display: flex;justify-content: center;align-items: center;">星期{{item}}</swiper-item>
									</swiper>
									<swiper :current='current_lesson_start' @change="currentLessonStartChange" vertical circular style="width: 80rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;">
										<swiper-item v-for="(item,index) in 12" :key="index" style="display: flex;justify-content: center;align-items: center;">{{item+1}}</swiper-item>
									</swiper>
									<view style="width: 20rpx;height: 72rpx;font-weight: 600;display: flex;justify-content: center;align-items: center;">-</view>
									<swiper :current='current_lesson_end' @change="currentLessonEndChange" vertical circular style="width: 80rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;">
										<swiper-item v-for="(item,index) in 12" :key="index" style="display: flex;justify-content: center;align-items: center;">{{item+1}}</swiper-item>
									</swiper>
								</view>
							</view>
						</view>
					</view>
					<view>
						<u-subsection @change="sectionChange" :list="weekList" active-color="#fff" inactive-color="#858488" style="width: 700rpx;"></u-subsection>
						<view style="height: 360rpx;width: 700rpx;background-color: #fff;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;flex-wrap: wrap;">
							<view @click="clickToCheck(index)" v-for="(item,index) in checkList" :key="index" style="height: 90rpx;width: 140rpx;position: relative;display: flex;justify-content: center;align-items: center;">
								<view :class="item.checkStyle" style="height: 80rpx;width: 130rpx;border-radius: 10rpx;position: absolute;z-index: 10;display: flex;justify-content: center;align-items: center;font-size: 30rpx;">{{item.number}}</view>
								<u-icon name="checkmark-circle-fill" size="40" style="position: absolute;z-index: 22;bottom: 10rpx;right: 10rpx;color: #fff;"></u-icon>
							</view>
						</view>
					</view>
				</view>	
			</u-popup>
			
			<!-- <view @click="show_end = true" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>结束时间</view>
						<view style="margin-right: 40rpx;">{{form.juti[1]}}</view>
					</view>
					<view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view>
				</view>
			</view> -->
			<!-- <view @click="chooseRepeat" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>重复</view>
						<view style="display: flex;align-items: center;color:grey;margin-right: 30rpx;">{{form.week[0]?"已选择":"不重复"}}
							<u-icon style="margin-left: 10rpx;" name="arrow-right" size="32"></u-icon>
						</view>
					</view>
					<view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view>
				</view>
			</view> -->
			<!-- <view @click="chooseColor" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>颜色</view>
						<view style="display: flex;align-items: center;color:grey;margin-right: 30rpx;">
							<view style="width: 32rpx;height: 32rpx;border-radius: 50rpx;" v-bind:style="{backgroundColor:form.color.border_color}"></view>
							<u-icon style="margin-left: 10rpx;" name="arrow-right" size="32"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view  style="width: 100vw;background-color: #fff;">
			<view v-if="cancelOrAdd" style="width: 100vw;background-color: #fff;margin-bottom: 15rpx;" >
				<view style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 20rpx;" :key='item'>
					<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
						<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;justify-content: space-between;align-items: auto;flex-direction: row;width: 200rpx;">
								<u-icon @click="currentPeriodCancel" name="minus-circle-fill" size="60" style="color: #e85132;"></u-icon>
								<view>时段二</view>
							</view>
							<view style="">单周 星期二 1-2节</view>
						</view>
						<!-- <view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view> -->
					</view>
				</view>
			</view>
			<view @click="nextPeriodAdd" style="width: 750rpx;background-color: #fff;height: 100rpx;display: flex;justify-content: flex-start;align-items: center;">
				<u-icon name="plus-circle-fill" size="60" style="color: #559af7;padding-left: 20rpx;margin-right: 10rpx;margin-top: 6rpx;"></u-icon>
				<view>添加时段</view>
			</view>
			<button @click="save" style="width: 670rpx;margin-top: 25rpx;background-color: #e9426a;color: #fff;">保存</button>
			<u-calendar :min-date='pick_start_date' :max-date='pick_end_date' @change='changeDate' v-model="show_calendar"></u-calendar>
			<u-picker mode="time" v-model="show_begin" :params='params' @confirm='confirmBegin'></u-picker>
			<u-picker mode="time" v-model="show_end" :params='params' @confirm='confirmEnd'></u-picker>
		</view>
		
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				
				url: '',
				event_list: undefined,
				kechengbiao: undefined,
				add_event: undefined,
				current_event_index: undefined,
				event: undefined,
				ifchose: undefined,
				colors:[
					{
						id:0,
						name:'红色',
						border_color:'#e9426a',
						background_color:'#f8d5e0',
						font_color:'#8c263f',
						fill_color:'#ea4c74',
						checked:false
					},
					{
						id:1,
						name:'橙色',
						border_color:'#f09a37',
						background_color:'#fbeace',
						font_color:'#905c1d',
						fill_color:'#f1a13d',
						checked:false
					},
					{
						id:2,
						name:'绿色',
						border_color:'#83d754',
						background_color:'#e3f6da',
						font_color:'#4e8131',
						fill_color:'#8bda5e',
						checked:false
					},
					{
						id:3,
						name:'蓝色',
						border_color:'#51aaf2',
						background_color:'#d6edfb',
						font_color:'#2f6691',
						fill_color:'#59b0f3',
						checked:false
					},
					{
						id:4,
						name:'紫色',
						border_color:'#c077db',
						background_color:'#f2e3f7',
						font_color:'#734783',
						fill_color:'#c481dc',
						checked:false
					},
					{
						id:5,
						name:'褐色',
						border_color:'#9d8563',
						background_color:'#ebe6df',
						font_color:'#5e4f3b',
						fill_color:'#a48e6f',
						checked:false
					}
				],
				form: {
					name: '',
					teachers: [],
					credit: 0,
					bixiu: '必修',
					time: [
						{
							place: '',
							week: [],
							day: 0,
							juti: [0, 1],
						}
					],
					date: '请选择',
					color: {
						id: 3,
						name: '蓝色',
						border_color: '#51aaf2',
						background_color: '#d6edfb',
						font_color: '#2f6691',
						fill_color: '#59b0f3',
						checked: false
					}
				},
				show_calendar: false,
				show_begin: false,
				show_end: false,
				params: {
					hour: true,
					minute: true,
				},
				checkList:[
					{number:1 ,checkStyle:'check',ifCheck:0},
					{number:2 ,checkStyle:'',ifCheck:0},
					{number:3 ,checkStyle:'check',ifCheck:0},
					{number:4 ,checkStyle:'',ifCheck:0},
					{number:5 ,checkStyle:'check',ifCheck:0},
					{number:6 ,checkStyle:'',ifCheck:0},
					{number:7 ,checkStyle:'check',ifCheck:0},
					{number:8 ,checkStyle:'',ifCheck:0},
					{number:9 ,checkStyle:'check',ifCheck:0},
					{number:10 ,checkStyle:'',ifCheck:0},
					{number:11 ,checkStyle:'check',ifCheck:0},
					{number:12 ,checkStyle:'',ifCheck:0},
					{number:13 ,checkStyle:'check',ifCheck:0},
					{number:14 ,checkStyle:'',ifCheck:0},
					{number:15 ,checkStyle:'check',ifCheck:0},
					{number:16 ,checkStyle:'',ifCheck:0},
					{number:17 ,checkStyle:'check',ifCheck:0},
					{number:18 ,checkStyle:'',ifCheck:0},
					{number:19 ,checkStyle:'check',ifCheck:0},
					{number:20 ,checkStyle:'',ifCheck:0},
				],
				weekList: [
					{name: '单周'}, 
					{name: '双周'}, 
					{name: '全周'},
					{name: '自定义'},
				],
				weekName:['一','二','三','四','五','六','天'],
				expand_or_not: false,
				current_day_change:0,
				current_lesson_start_change: 0,
				current_lesson_end_change: 0,
				happen_time_order: 0,
				cancelOrAdd: 0,
				WeeksChosen: undefined,
				pick_start_date:'2022-01-01',
				pick_end_date:'2022-12-31'
			}
		},
		onUnload() {
			getApp().globalData.color = 0
			getApp().globalData.repeat = 0
			
		},
		onLoad() {
		
			if (event.date) {
				console.log(1)
				console.log(event.date)
				this.form.date = event.date
			} else {
				console.log(2)
				var start_date = uni.getStorageSync('start_date')
				console.log(start_date)
				var date = new Date(start_date.setDate(start_date.getDate() + event.week[0] * 7 + event.day))
				this.form.date = date.getFullYear() + '-' + ((date.getMonth() + 1) > 10?(date.getMonth() + 1):'0' + (date.getMonth() + 1))  + '-' + (date.getDate() > 10 ? date.getDate():'0' + date.getDate())
				console.log(this.form.date)
			}
			// this.form.date = '重复'
			this.pick_start_date = getApp().globalData.start_date.splice(0,4) + '-01-01'
			this.pick_end_date = getApp().globalData.start_date.splice(0,4) + '-12-31'
		},
		onShow() {
			
			
			
			var repeat = getApp().globalData.repeat
			if (repeat) {
				this.form.week = repeat
			}
			console.log(getApp().globalData.color)
			var color = getApp().globalData.color
			if (color) {
				this.form.color = color
			}
		},
		methods: {
			sectionChange(index) {
				if(index == 0){
					for(var i = 0;i < this.checkList.length;i++){
						if((i+1) % 2 == 0){
							this.checkList[i].checkStyle = ''
						}
						else{
							this.checkList[i].checkStyle = 'check'
						}
					}
				}
				else if(index == 1){
					for(var i = 0;i < this.checkList.length;i++){
						if((i+1) % 2 == 0){
							this.checkList[i].checkStyle = 'check'
						}
						else{
							this.checkList[i].checkStyle = ''
						}
					}
				}
				else if(index == 2){
					for(var i = 0;i < this.checkList.length;i++){
						this.checkList[i].checkStyle = 'check'
					}
				}
				else if(index == 3){
					for(var i = 0;i < this.checkList.length;i++){
						this.checkList[i].checkStyle = ''
					}
				}
			},
			chooseLessonColor(index) {
				for (var i = 0; i < this.colors.length; i++) {
					this.colors[i].checked = false
				}
				console.log(index)
				console.log('122232323')
				this.form.color = this.colors[index]
				this.colors[index].checked = true
				// this.form.color.checked = true
			},
			currentLessonStartChange(res) {
				this.current_lesson_start_change = res.detail.current
			},
			currentLessonEndChange(res) {
				this.current_lesson_end_change = res.detail.current
			},
			currentDayChange(res) {
				this.current_day_change = res.detail.current
			},
			nextPeriodAdd() {
				var period_new = {
					day: 0,
					juti :[0,1],
					week:[],
					place:''
				}
				
				this.form.time.push(period_new) 
			},
			currentPeriodCancel(index) {
				this.cancelOrAdd = false
				this.form.time.splice(index,1)
			},
			weekChangeCancel() {
				this.expand_or_not = false
			},
			weekChangeSave() {
				var week_new = []
				var order = this.happen_time_order
				for (var i = 0; i < this.checkList.length; i++) {
					if(this.checkList[i].checkStyle == 'check'){
						
						
						week_new.push(i)
						
						this.form.time[order].week = week_new
					}
				}
				this.form.time[order].day = this.current_day_change
				this.form.time[order].juti[0] = this.current_lesson_start_change
				this.form.time[order].juti[1] = this.current_lesson_end_change 
				
				
				
				this.expand_or_not = false
			},
			playWeekContract(happen_time_order) {
				this.expand_or_not = false
				console.log(happen_time_order)
				if (!this.form.time[happen_time_order].place) {
					this.form.time[happen_time_order].place =  this.form.time[0].place
				}
			},
			playWeekExpand(index) {
				this.current_day = this.form.time[index].day
				this.expand_or_not = true
				this.current_lesson_start = this.form.time[index].juti[0]
				this.current_lesson_end = this.form.time[index].juti[1]
				this.happen_time_order = index
				
				const week = this.form.time[index].week
				
				for(var i = 0;i < this.checkList.length;i++){
					this.checkList[i].checkStyle = ''
				}
				
				for (var i = 0; i < week.length; i++)
				{
					this.checkList[week[i]].checkStyle = 'check'
				}
					
			},
			clickToCheck(index){
				if(this.checkList[index].checkStyle == 'check'){
					this.checkList[index].checkStyle = ''
				}
				else{
					this.checkList[index].checkStyle = 'check'
				}
			},
			changeDate(e) {
				this.form.date = e.result
			},
			confirmBegin(e) {
				this.form.juti[0] = e.hour + ':' + e.minute
			},
			confirmEnd(e) { 
				this.form.juti[1] = e.hour + ':' + e.minute
			},
			chooseRepeat() {
				getApp().globalData.repeat = this.form.week
				uni.navigateTo({
					url: 'repeat'
				})
			},
			chooseColor() {
				uni.navigateTo({
					url: 'color'
				})
				getApp().globalData.color = this.form.color
			},
			
			calcWeekType(index){
				var week = this.form.time[index].week
				if (!week.length){
					return ''
				}
				const start_week = week[0]
				const end_week = week[week.length - 1]
				var i = start_week;
				var end;
				console.log(end_week);
				while (week.indexOf(i) != -1 && week.indexOf(i+1) == -1 ) {
					console.log(i)
					i = i + 2
					// if ( this.checkList[i].checkStyle != 'check' || this.checkList[i+1].checkStyle != '' ) {
					// 	end = i-2
					// 	break;
					// }
					if(i == end_week){
						if (i % 2){
							return (start_week + 1) + '-' + (end_week + 1) + '周双周'
						}
						else{
							return (start_week + 1) + '-' + (end_week + 1) + '周单周'
						}
					}
				}
				console.log(index)
				console.log('after单双')
				for (i = start_week;i<end_week+1;i++){
					if (week.indexOf(i)== -1){
						console.log(i)
						break
					}
				}
				if(i == end_week+1){
					return (start_week + 1) + '-' + (end_week + 1) + '周全周'
				}
				return '自定义'
				
			},
		}
	}
</script>
<style>
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}
	.check{
		background-color: #559af7;
		color: #fff;
	}
	.weekContract {
		position: absolute;
		z-index: -1;
		/* opacity: 0; */
		pointer-events: none;
	}
	.weekExpand {
		position: absolute;
		z-index: 0;
	}
	
	.weekOthersExpand {
		position: relative;
		z-index: 99;
	}
	.weekOthersContract {
		position: relative;
		z-index: 99;
	}
	
	
	/*向下滑*/
	.slide-out-bottom {
		/* margin-top: -450rpx; */
		animation: slide-out-bottom 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	@keyframes slide-out-bottom {
		0% {
			transform: translateY(0);
			opacity: 1;
		}

		100% {
			transform: translateY(528rpx);
			opacity: 1;
		}
	}
	/*向上滑*/
	.slide-in-bottom {
		animation: slide-in-bottom 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	
	@keyframes slide-in-bottom {
		0% {
			transform: translateY(518rpx);
			opacity: 1;
		}
	
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
</style>
